/* 栅格系统 */
.xui {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}
.wrap {
	display: flex;
	margin: 0;
	padding: 0;
	padding-left: 10px;
	padding-right: 10px;
	flex-wrap: nowrap;
	flex-direction: column;
}
.row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
}
.frame {
	background: #f2f2f2;
	border: 1px solid #e2e2e2;
	border-radius: 2px;
	padding: 8px;
	margin-bottom: 12px;
}
.frame form {
	width: 100%;
}
.box {
	display: flex;
	box-sizing: border-box;
	width: auto;
	margin-bottom: 16px;
	position: relative;
}
.row.nowrap {
	flex-wrap: nowrap;
}
.row .v-top {
	align-self: flex-start;
}
.row .v-center {
	align-self: center;
}
.row .v-bottom {
	align-self: flex-end;
}
.row .flow-right {
	justify-content: flex-end;
}
.row.x1 {
	flex: 1;
}
.row .x1 {
	flex: 1;
}
.row .x2 {
	flex: 2;
}
.row .x3 {
	flex: 3;
}
.row .x4 {
	flex: 4;
}
.row .x6 {
	flex: 6;
}
.row .x12 {
	flex: 12;
}
.row .col-1 {
	width: 8.333%;
}
.row .col-2 {
	width: 16.666%;
}
.row .col-3 {
	width: 24.999%;
}
.row .col-4 {
	width: 33.332%;
}
.row .col-6 {
	width: 49.998%;
}
.row .col-12 {
	width: 100%;
}

/* 宽度 */
.w1 {
	width: 10px;
	min-width: 10px;
}
.w2 {
	width: 20px;
	min-width: 20px;
}
.w3 {
	width: 30px;
	min-width: 30px;
}
.w4 {
	width: 40px;
	min-width: 40px;
}
.w5 {
	width: 50px;
	min-width: 50px;
}
.w6 {
	width: 60px;
	min-width: 60px;
}
.w7 {
	width: 70px;
	min-width: 70px;
}
.w8 {
	width: 80px;
	min-width: 80px;
}
.w9 {
	width: 90px;
	min-width: 90px;
}
.w10 {
	width: 100px;
	min-width: 100px;
}
.w11 {
	width: 110px;
	min-width: 110px;
}
.w12 {
	width: 120px;
	min-width: 120px;
}
.w13 {
	width: 130px;
	min-width: 130px;
}
.w14 {
	width: 140px;
	min-width: 140px;
}
.w15 {
	width: 150px;
	min-width: 150px;
}
.w16 {
	width: 160px;
	min-width: 160px;
}
.w17 {
	width: 170px;
	min-width: 170px;
}
.w18 {
	width: 180px;
	min-width: 180px;
}
.w19 {
	width: 190px;
	min-width: 190px;
}
.w20 {
	width: 200px;
	min-width: 200px;
}
.w21 {
	width: 210px;
	min-width: 210px;
}
.w22 {
	width: 220px;
	min-width: 220px;
}
.w23 {
	width: 230px;
	min-width: 230px;
}
.w24 {
	width: 240px;
	min-width: 240px;
}
.w25 {
	width: 250px;
	min-width: 250px;
}
.w26 {
	width: 260px;
	min-width: 260px;
}
.w27 {
	width: 270px;
	min-width: 270px;
}
.w28 {
	width: 280px;
	min-width: 280px;
}
.w29 {
	width: 290px;
	min-width: 290px;
}
.w30 {
	width: 300px;
	min-width: 300px;
}
.w31 {
	width: 310px;
	min-width: 310px;
}
.w32 {
	width: 320px;
	min-width: 320px;
}
.w33 {
	width: 330px;
	min-width: 330px;
}
.w34 {
	width: 340px;
	min-width: 340px;
}
.w35 {
	width: 350px;
	min-width: 350px;
}
.w36 {
	width: 360px;
	min-width: 360px;
}
.w37 {
	width: 370px;
	min-width: 370px;
}
.w38 {
	width: 380px;
	min-width: 380px;
}
.w39 {
	width: 390px;
	min-width: 390px;
}
.w40 {
	width: 400px;
	min-width: 400px;
}
/*移动端栅格系统调整  */
@media (max-width: 760px) {
	.row .col-6, .row .col-12 {
		width: 100%;
	}
	.m100 {
		width: 100% !important;
	}
	.m50 {
		width: 50% !important;
	}
	.m-hidden {
		display: none !important;
	}
	.sub {
		display: block;
		position: relative;
		width: calc(100vw - 20px);
	}
}
